<template>
  <div class="flex gap-4">
    <a-button @click="group">{{ t('自动分组') }}</a-button>
    <a-form :disabled="table.keys.length === 0" class="flex gap-4">
      <a-button-group>
        <a-button @click="batchDisplay('1')">
          {{ t('批量显示') }}
          <template #icon>
            <EyeOutlined />
          </template>
        </a-button>
        <a-button @click="batchDisplay('0')" class="text-gray-400">
          <template #icon>
            <EyeInvisibleOutlined />
          </template>
          {{ t('批量隐藏') }}
        </a-button>
      </a-button-group>
      <a-button-group>
        <a-button @click="batchConn('1')">
          <template #icon>
            <LinkOutlined />
          </template>
          {{ t('长链接') }}
        </a-button>
        <a-button @click="batchConn('0')">{{ t('短链接') }}</a-button>
      </a-button-group>
    </a-form>
    <a-button @click="upgrade" type="ghost" class="text-green-400">{{ t('升级') }}</a-button>
    <a-modal v-model:open="visible" centered title="升级" @ok="submit">
      <a-form layout="vertical" :model="upgradeForm">
        <a-form-item label="选择尺寸">
          <LibrarySizeOptions @change="getVersionList" v-model:value="upgradeForm.resolutionId" />
        </a-form-item>
        <a-form-item label="选择版本"></a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { deviceConfig, automaticGrouping, firmwareUpgrade } from '@/api/modules/lcd/lcd-device';
import { table } from '../data/data';
import { list } from '../data/curd';
import { notify } from '@/utils/common/common';
import { listFw } from '@/api/modules/esl/priceTag';
import type { LinkOutlined } from '@ant-design/icons-vue';

const visible = ref(false);
const { t } = useI18n();
const versionList = ref();
const upgradeForm = ref({
  resolutionId: '',
  version: '',
});
const batchDisplay = async (display: '1' | '0') => {
  const { data } = await deviceConfig({
    display,
    mediaIds: table.value.keys,
  });
  notify(data);
  list();
};
const batchConn = async (conn: '1' | '0') => {
  const { data } = await deviceConfig({
    conn,
    mediaIds: table.value.keys,
  });
  notify(data);
  list();
};
const upgrade = () => {
  visible.value = true;
};
const group = async () => {
  const { data } = await automaticGrouping();
  notify(data);
  list();
};
const getVersionList = async () => {
  const { data } = await listFw(upgradeForm.value.resolutionId);
  versionList.value = data.data;
};
const submit = () => {
  firmwareUpgrade({
    tags: [],
    firmware: upgradeForm.value,
  });
};
</script>

<style lang="scss" scoped></style>
